<template>
  <div class="main">
    <div class="top">
      <div class="back">
        <img @click="comeBack" src="../../assets/img/icon/jiantou_left.svg">
        <span>返回</span>
      </div>
      <div class="title">常用加分项管理</div>
      <div :class=" (stateOne ? 'state1' : 'state2')">
<!--        <img src="../../assets/img/icon/yellow_flag.svg">-->
        <div class="img"></div>
        <span @click="clickFlag">{{ (stateOne ? '管理' : '完成')}}</span>
      </div>
    </div>
    <div class="items">
      <div class="item" v-for="(obj,index) in list" :key="obj.index" :id="(index % 2 == 0 ? 'left': 'right')">
      <div class="circle"></div>
      <input type="text" :class="(stateOne?'inputState1':'inputState2')" v-model="obj.mark" :readonly="stateOne">
      </div>
    </div>
    <div class="constItem">
      <div class="circle"></div>
     <div class="noadd">不加分</div>
    </div>
    <div class="changeButtom" @click="clickMakeSure" v-show="!stateOne">确认修改</div>
  </div>
</template>

<script>
export default {
  name: 'Manage',
  data () {
    return {
      list: null,
      stateOne: true
    }
  },
  mounted () {
    //   if (this.$store.state.alwaysAddItems == null){
    //     this.$store.dispatch('getAlwaysAddItems')
    //   }
    // this.list = this.$store.state.alwaysAddItems
    // console.log(this.list)
    // console.log(this.$store.state.alwaysAddItems)
  },
  methods: {
    comeBack: function () {
      this.$router.push({
        name: 'Emine'
      })
    },
    clickMakeSure: function () {
      this.$store.commit('setAlwaysAddItems', this.list)
      this.stateOne = true
    },
    clickFlag: function () {
      this.stateOne = !this.stateOne
      this.list = this.$store.state.alwaysAddItems
      console.log(this.list)
      console.log(this.$store.state.alwaysAddItems)
    }
  },
  created () {
    console.log('creaded')
    console.log(this.list)
    this.list = this.$store.state.alwaysAddItems.slice(0)
    console.log(this.list)
  }
}
</script>

<style scoped lang="scss">
  .main{
    width: 100%;
    height: 100%;
    background: white;
  }
  .top{
    width: 100%;
    height: px2rem(44);
    display: flex;
    align-items: center;
    .back{
      width: px2rem(46);
      height: 100%;
      margin-left: px2rem(20);
      display: flex;
      align-items: center;
      white-space: nowrap;
      span{
        font-size:px2rem(14);
        font-family:PingFang SC;
        font-weight:500;
        line-height:px2rem(20);
        color:rgba(38,38,38,1);
        margin-left: px2rem(3);
      }
      img{
        width: px2rem(16);
        height: px2rem(14);
      }
    }
    .title{
      font-size:px2rem(18);
      font-family:PingFang SC;
      font-weight:bold;
      line-height:px2rem(25);
      color:rgba(38,38,38,1);
      margin-left: px2rem(68);
      white-space: nowrap;
    }
    .state2{
      width: px2rem(64);
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: px2rem(55);
      span{
        font-size:px2rem(14);
        font-family:PingFang SC;
        font-weight:500;
        line-height:px2rem(20);
        color:rgba(254,201,6,1);
        margin-left: px2rem(5);
      }
      .img{
        width: px2rem(13);
        height: px2rem(16);
        background: url("../../assets/img/icon/yellow_flag.svg");
        background-size: 100% 100%;
      }
    }
    .state1{
      width: px2rem(64);
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: px2rem(55);
      span{
        font-size:px2rem(14);
        font-family:PingFang SC;
        font-weight:500;
        line-height:px2rem(20);
        color:rgba(38,38,38,1);
        margin-left: px2rem(5);
      }
      .img{
        width: px2rem(13);
        height: px2rem(16);
        background: url("../../assets/img/icon/flag_black.svg");
        background-size: 100% 100%;
      }
    }
  }
  .items{
    input{
      -webkit-appearance:none;
      -moz-appearance: none;
    }
    width: 100%;
    height: px2rem(205);
    display: flex;
    flex-wrap: wrap;
  }
  .item{
    width: px2rem(375/2);
    height: px2rem(59);
    .circle{
      width: px2rem(16);
      height: px2rem(16);
      border-radius: 50%;
      border: px2rem(2) solid #262626 ;

    }
    display: flex;
    .inputState2{
      width: px2rem(60);
      height: px2rem(23);
      background:rgba(242,244,243,1);
      border-radius:px2rem(2);
      font-size:px2rem(18);
      font-family:PingFang SC;
      font-weight:400;
      line-height:px2rem(25);
      color:rgba(38,38,38,1);
    }
    .inputState2:focus{
      background:rgba(242,244,243,1);
      box-shadow:0px 0px px2rem(2) rgba(2,164,237,1);
      opacity:1;
      border-radius:px2rem(2);
      content: '';
    }
    .inputState1{
      width: px2rem(60);
      height: px2rem(23);
      background:white;
      font-size:px2rem(18);
      font-family:PingFang SC;
      font-weight:400;
      line-height:px2rem(25);
      color:rgba(38,38,38,1);
      border: none;

    }
  }
  #left{
    input{
      margin-left: px2rem(11);
      margin-top: px2rem(29);
    }
    .circle{
      margin-left: px2rem(73);
      margin-top: px2rem(33);
    }
  }
  #right{
    input{
      margin-left: px2rem(11);
      margin-top: px2rem(29);
    }
    .circle{
      margin-left: px2rem(57.5);
      margin-top: px2rem(33);
    }
  }
  .constItem{
    width: 100%;
    margin-top: px2rem(36);
    display: flex;
    .circle{
      width: px2rem(16);
      height: px2rem(16);
      border-radius: 50%;
      border: px2rem(2) solid #262626 ;
      margin-left: px2rem(73);
    }
    .noadd{
      font-size:px2rem(16);
      font-family:PingFang SC;
      font-weight:400;
      line-height:px2rem(22);
      color:rgba(38,38,38,1);
      margin-left: px2rem(11);
    }
  }
  .changeButtom{
    width: px2rem(277);
    height: px2rem(44);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:px2rem(18);
    font-family:PingFang SC;
    font-weight:500;
    line-height:px2rem(25);
    color:rgba(255,255,255,1);
    background: url("../../assets/img/icon/uploader_homepage_btn_sub.svg");
    background-size: 100% 100%;
    margin-top: px2rem(77);
    margin-left: px2rem(49);
  }
</style>
